<template>
    <div>
        <el-col :span="5" style="width: 100%" v-model="list">
            <h1>SteamPY市场</h1>
            <el-menu
                    default-active="5"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#303133"
                    active-text-color="#fff"
                    unique-opened
            >
                <!--          热门游戏-->
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location one" ></i>
                        <span>热门游戏</span>
                    </template>
                    <el-menu-item v-for="item in list.PopGame" @click="goPage(item.path,item.name)">
                        {{item.name}}
                    </el-menu-item>
                </el-submenu>
                <!--          CDkey市场-->
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-key one"></i>
                        <span>CDkey市场</span>
                    </template>
                    <el-menu-item v-for="item in list.CDkey" @click="goPage(item.path,item.name)">
                        {{item.name}}
                    </el-menu-item>
                </el-submenu>
                <!--          PY代购市场-->
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-shopping-cart-2 one"></i>
                        <span>PY代购市场</span>
                    </template>
                    <el-menu-item v-for="item in list.PYHelp" @click="goPage(item.path,item.name)">
                        {{item.name}}
                    </el-menu-item>
                </el-submenu>
                <!--          STEAM充值-->
                <!--          橘子菠萝-->
                <!--          神秘百宝箱-->
                <div>
                    <el-menu-item v-for="item in list.Recharge" @click="goPage(item.path,item.name)">
                        <i class="el-icon-suitcase-1 one"></i>
                        {{item.name}}
                    </el-menu-item>
                </div>
                <!--          买家中心-->
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-sold-out one"></i>
                        <span>买家中心</span>
                    </template>
                    <el-menu-item v-for="item in list.Buy" @click="goPage(item.path,item.name)">
                        {{item.name}}
                    </el-menu-item>
                </el-submenu>
                <!--          卖家中心-->
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-sell one"></i>
                        <span>卖家中心</span>
                    </template>
                    <el-menu-item v-for="item in list.Sell" @click="goPage(item.path,item.name)">
                        {{item.name}}
                    </el-menu-item>
                </el-submenu>
                <!--          帮助 -->
                <!--          加入我们-->
                <!--          <div>-->
                <!--            <template slot="title">-->
                <!--              &lt;!&ndash;              <i class="el-icon-shopping-cart-2"></i>&ndash;&gt;-->
                <!--            </template>-->
                <!--            <el-menu-item v-for="item in HelpAndJoin"  @click="goPage(item.path,item.name)">-->
                <!--              {{item.name}}-->
                <!--            </el-menu-item>-->
                <!--          </div>-->
            </el-menu>
        </el-col>
    </div>
</template>

<script>
    import {PopGame, CDkey, PYHelp, Recharge, Buy, Sell, HelpAndJoin} from '../assets/js/TheAside'
    export default {
        name: "TheAside",
        inject:["reload"],
        data() {
            return {
              list :{
                PopGame: [],
                CDkey: [],
                PYHelp: [],
                Recharge: [],
                Buy: [],
                Sell: [],
                HelpAndJoin: [],
              },
            }
        },
        created() {
            this.list.PopGame = PopGame;
            this.list.CDkey = CDkey;
            this.list.PYHelp = PYHelp;
            this.list.Recharge = Recharge;
            this.list.Buy = Buy;
            this.list.Sell = Sell;
            this.list.HelpAndJoin = HelpAndJoin;
        },
        methods: {
            goPage(path, name) {
              const br ={name:name,path:path}
              this.$store.commit("setBreadList",br);
              this.$router.push({path: path})
              // this.reload();
            }
        },
    }
</script>

<style>
    .el-menu-item, .el-submenu__title {
        line-height: 50px !important;
        height: 50px !important;
    }
    .el-menu-item:hover{
      transform: scale(1.3);
      transition: all .3s;
    }
    span:hover{
      transform: scale(1.1);
      transition: all .3s;
    }
    .el-submenu:hover{
      transform: scale(1.1);
      transition: all .3s;
    }
</style>
